<script lang="ts" setup>
  import { TableOptions } from '@/types/dataTable'
  import { useParamsListQuery } from '@/hooks/paramsListQuery'
  import { Bell, Search, Delete, Edit, Plus } from '@element-plus/icons-vue'
  import { isExpired, parseTime } from '@/utils/index'
  import Form from './components/form.vue'
  import router from '@/routers'
  import { ElMessage } from 'element-plus'
  const { listQuery } = useParamsListQuery()
  const formRef = ref()
  const pagingTable = ref()
  defineOptions({
    name: 'CategoryCompetition',
  })
  const options = ref<TableOptions>({
    add: {
      enable: true,
      permission: '',
    },
    edit: {
      enable: true,
      permission: '',
    },
    delete: {
      enable: true,
      permission: '',
      url: '/competition/category/delete',
    },
    listUrl: '/competition/category/list', // 列表请求URL
  })
  const getEndTime = (endTime: any) => {
    const targetTime = new Date(endTime).getTime()
    return targetTime
  }
  const openForm = (id?: any, row?: any) => {
    console.log(id, row)
    if (row && new Date(row.endTime).getTime() < new Date().getTime()) {
      ElMessage.warning('当前时间已过，无法编辑')
      return
    }
    if (row && row.status !== 1) {
      ElMessage.warning('任务已开启，无法编辑')
      return
    }
    formRef.value?.show(row)
  }
  const getDeptList = () => {
    pagingTable.value?.getList()
  }
  //跳转到流程编排
  // const editItem = (id: number) => {
  //   router.push({ name: 'logicFlowCompetition', params: { id } })
  // }
</script>
<template>
  <div class="app-container">
    <data-table ref="pagingTable" v-model:list-query="listQuery" :options="options" @add="openForm" @edit="openForm">
      <template #filter-content>
        <el-input
          id="search-keyword"
          v-model.trim="listQuery.params.keyword"
          :prefix-icon="Search"
          style="width: 200px"
          placeholder="名称"
          class="filter-item"
        />
        <tree-select v-model:model-status="listQuery.params.status" dic-code="ajaf"></tree-select>
      </template>
      <template #data-columns>
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称" show-overflow-tooltip align="center" prop="name" />
        <el-table-column label="参与数量" show-overflow-tooltip align="center" width="110" />
        <el-table-column label="参与部门" show-overflow-tooltip align="center" prop="endTime" width="150">
          <template #default="scope">
            <el-popover v-if="scope.row.departmentName.length > 0" effect="light" trigger="hover" placement="top">
              <template #default>
                <div>分类名: {{ scope.row.name }}</div>
                <div
                  >部门:
                  <span v-for="item in scope.row.departmentName" :key="item" style="margin: 0 3px">{{ item }}</span>
                </div>
              </template>
              <template #reference>
                <el-tag type="warning" style="cursor: pointer">部分部门</el-tag>
              </template>
            </el-popover>
            <el-tag v-else>所有部门</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="竞赛时间" show-overflow-tooltip align="center" width="260">
          <template #default="scope">
            {{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }} ~ {{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="描述" show-overflow-tooltip align="center" prop="desc"></el-table-column>
        <el-table-column label="状态" show-overflow-tooltip align="center" width="130">
          <template #default="scope">
            <el-tag v-if="isExpired(scope.row.startTime, scope.row.endTime) === 0">未开始</el-tag>
            <el-countdown
              v-if="isExpired(scope.row.startTime, scope.row.endTime) === 1"
              title="剩余报名时间"
              format="DD 天 HH:mm:ss"
              :value="getEndTime(scope.row.endTime)"
            />
            <el-tag v-if="isExpired(scope.row.startTime, scope.row.endTime) === 2" type="danger">已过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="流程" show-overflow-tooltip align="center" width="90">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="教师-部门管理员-校·管理员" placement="top">
              <el-tag v-if="scope.row.type === 0">默认</el-tag>
            </el-tooltip>
            <el-tag v-if="scope.row.type === 1" type="warning">自定义</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="140">
          <template #default="scope">
            <DetailLink :id="scope.row.id" to="logicFlowCompetition" :params="{ id: scope.row.id }">
              <el-button size="small" type="primary" icon="EditPen" round plain>编排</el-button>
            </DetailLink>
          </template>
        </el-table-column>
      </template>
    </data-table>
    <Form ref="formRef" @refresh-list="getDeptList"></Form>
    <svg-icon name="testzw" />
  </div>
</template>
<style lang="scss" scoped>
  :deep(.el-statistic__number) {
    font-size: 12px;
  }
  :deep(.el-statistic__head) {
    margin-bottom: 0;
  }
</style>
